<template>
  <!-- 底部歌曲播放  -->
  <div class="zw" :style="{ height: footerHeight + 'px' }"></div>
  <div class="footer" ref="footerRef">

    <!-- 音乐播放器 -->
    <keep-alive>
      <MusicPlayer v-if="$route.meta.showMusicPlayer != false" />
    </keep-alive>

    <!-- 底部导航 判断$router的meta  确定是否显示底部导航-->
    <van-tabbar v-model="$route.meta.name" active-color="#FE3A3A" :fixed="false" safe-area-inset-bottom
      v-if="$route.meta.name">
      <van-tabbar-item v-for="item in list" :name="item.name" :key="item.name" :icon="item.icon" :to="'/' + item.name">
        {{ item.text }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>

import { useRoute } from 'vue-router'
import { reactive, toRefs, ref, nextTick, onUpdated, } from 'vue'
import MusicPlayer from '@/components/musicPlayer/MusicPlayer.vue'

const $route = useRoute();
let data = reactive({
  list: [
    {
      name: 'home',
      icon: 'home-o',
      text: '首页',
    },
    {
      name: 'music',
      icon: 'service-o',
      text: '歌单',
    },
    {
      name: 'user',
      icon: 'friends-o',
      text: '我的',
    }
  ]
})
const { list } = toRefs(data);

let footerRef = ref();
let footerHeight = ref();

onUpdated(() => {
  nextTick(() => {
    footerHeight.value = footerRef.value.offsetHeight
  })
})



</script>
  
<style lang='less' scoped>
.zw {
  width: 100%;
}

.footer {
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #999;
  position: fixed;
  bottom: 0;
  left: 0;
}

.van-tabbar::after {
  border: 0;
}
</style>